<template>
    <div class="app-container order-list-index">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <!-- <el-button
            v-if="YT_roles"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >{{ $t("common.add") }}</el-button
          > -->
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <TableComponents
        ref="tableRef"
        :url="'/wms/bmsBill/customerBmsBillPage'"
        :columns="columnsAry"
        :params="{ ...queryParams }"
        :req="{
          page: 0,
          size: 10,
        }"
        :methodType="'paramsPost'"
        :return-data="returnData"
      >
        <el-table-column slot="operation" :label="$t('common.operation')" align="center"
          ><template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">{{ $t('common.edit') }}</el-button>
            <el-button type="text" @click="handleDelete(scope.row)"
              >{{ $t('common.del') }}</el-button
            >
          </template></el-table-column
        >
      </TableComponents>
      <el-dialog :visible.sync="openVisible" :title="title" width="50%">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-position="left"
          label-suffix=":"
          :rules="rules"
          label-width="120px"
        >
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in columnForm.base"
              :key="index"
              :xs="24"
              :sm="item.col"
              :md="item.col"
              :lg="item.col"
              :xl="item.col"
            >
              <FormComponents :item-obj="item" :form="ruleForm" :isedit="isEdit">
                <template slot="customerId">
                  <WmsCustomerSelect
                    v-model="ruleForm.customerId"
                  ></WmsCustomerSelect>
                </template>
                <template slot="supplierId"></template>
              </FormComponents>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">{{ $t('common.confirm') }}</el-button>
          <el-button type="primary" @click="cancel">{{ $t('common.cancel') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import dayjs from "dayjs";
  import {
    addEeAccount,
    editEeAccount,
    delEeAccount,
    exportEeAccount,
  } from "@/api/money";
  import TableComponents from "@/components/Table/list.vue";
  import TabFilter from "@/components/Tab/tabFilter.vue";
  import FormComponents from "@/components/FormComponents/index.vue";
  
  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: true,
      },
    },
    components: {
      FormComponents,
      TableComponents,
      TabFilter,
    },
  
    data() {
      return {
        activeName: 1,
        showSearch: true,
        columns: [
          { key: 1, label: this.$t("fiance.payee"), visible: true },
          { key: 2, label: this.$t("fiance.drawee"), visible: true },
          { key: 3, label: this.$t("fiance.total"), visible: true },
          { key: 4, label: this.$t("common.createTime"), visible: true },
          { key: 5, label: this.$t("common.operation"), visible: true },
        ],
        columnsAry: [
          { prop: "billNo", label: "账单编号", width: "130px" },
          { prop: "customerName", label: this.$t('customer.name'), width: "100px" },
          { prop: "payeeName", label: this.$t('fiance.payeeName'), width: "100px" },
          { prop: "payerName", label: this.$t('fiance.payerName'), width: "100px" },
          { prop: "writeOffAmount", label: "已销账", width: "100px" },
          { prop: "yzcAmount", label: "未销账", width: "100px" },
          { prop: "customerAmount", label: "客户余额", width: "100px" },
          { prop: "createTime", label: "创建时间", width: "140px" },
          { prop: "operation", slot: 'operation', label: this.$t('common.operation'), width: "100px" },
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        params: {},
        openVisible: false,
        ruleForm: {},
        rules: {
          amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
          payee: [{ required: true, message: "请选择收款人", trigger: "change" }],
          payer: [{ required: true, message: "请选择付款人", trigger: "change" }],
          serviceFeeCode: [
            { required: true, message: "请选择费用类型", trigger: "change" },
          ],
        },
        title: null,
      };
    },
    computed: {
      YT_roles() {
        // 暂时判断roles为common不是客户的未YT
        if (this.$store.state.user.roles[0] !== "common") {
          return true;
        }
      },
      columnForm() {
        const base = [
          { prop: "bankAccount", label: this.$t('fiance.accountNo'), type: "input", col: 24 },
          { prop: "bank", label: this.$t('fiance.openingBank'), type: "input", col: 24 },
          { prop: "accountName", label: this.$t('common.name'), type: "input", col: 24 },
          { prop: "address", label: this.$t('common.address'), type: "input", col: 24 },
          { prop: "phone", label: this.$t('common.phone'), type: "input", col: 24 },
          { prop: "remarks", label: this.$t('common.remark'), type: "input", col: 24 },
          {
            prop: "customerId",
            slot: "customerId",
            label: this.$t('common.customer'),
            type: "select",
            col: 24,
          },
          // {
          //   prop: "supplierId",
          //   slot: "supplierId",
          //   label: "供应商",
          //   type: "input",
          //   col: 24,
          // },
        ];
        return { base };
      },
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.$nextTick(() => {
          this.$refs.tableRef.getList();
        });
      },
      returnData(data) {
        return data.content.map((r) => {
          r.createTime = dayjs(r.createTime).format("YYYY-MM-DD HH:mm:ss");
          return r;
        });
      },
      cancel() {
        this.openVisible = false;
        this.resetForm();
      },
      resetForm() {
        this.$refs["ruleForm"].resetFields();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.openVisible = true;
        this.resetForm();
        this.title = this.$t("common.add");
      },
      // 编辑
      handleEdit(row) {
        this.title = this.$t("common.edit");
        const obj = row
        this.ruleForm = obj;
        this.openVisible = true;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            //   this.ruleForm.warehousingTime = dayjs(this.ruleForm.warehousingTime).format(
            //     "YYYY-MM-DD HH:mm:ss"
            //   );
            if (this.ruleForm.id != null) {
              editEeAccount(this.ruleForm).then((response) => {
                this.$modal.msgSuccess(this.$t("common.succcessInfo"));
                this.openVisible = false;
                this.getList();
              });
            } else {
              addEeAccount(this.ruleForm).then((response) => {
                this.$modal.msgSuccess(this.$t("common.succcessInfo"));
                this.openVisible = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm(this.$t('common.delMsg'), this.$t('common.reminder'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          const ids = row.id || this.ids
          delEeAccount(ids).then(res=>{
            if(res) {
              this.$message({
                type: 'success',
                message: this.$t('common.succcessInfo')
              });
              this.getList()
            }
          });
        }).catch(() => {});
      },
    },
  };
  </script>
  <style lang="scss">
  .tableTooltip {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    background: #f5f7fa;
    padding: 12px;
    color: #606266;
  }
  </style>
  